<template>
  <div class="lineChart97" ref="lineChart97"></div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  radar: {
    // shape: 'circle',
    center: ["50%", "55%"],
    radius: "65%",
    indicator: [
      { name: "气象卫星", max: 6500 },
      { name: "资源卫星", max: 16000 },
      { name: "海洋卫星", max: 30000 },
      { name: "卫星01", max: 38000 },
      { name: "卫星02", max: 52000 },
      { name: "卫星03", max: 25000 },
    ],
    name: {
      textStyle: {
        color: "#000",
        fontSize: "18",
        fontWeight: "bold",
      },
    },
  },
  series: [
    {
      name: "Budget vs spending",
      type: "radar",
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: "Allocated Budget",
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: "Actual Spending",
        },
      ],
    },
  ],
};
export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.lineChart97);
      this.setOptionsFn();
    },
    setOptionsFn() {
      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="less" scoped>
.lineChart97 {
  width: 100%;
  height: 100%;
}
</style>
